<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in formData" :key="index">
          <div class="grid-content bg-purple">
            <div class="mb10">
              <span class="mr5 fontSizeB">{{ item.name }}</span>
              <el-popover placement="top-start" width="200" trigger="hover" :content="item.description">
                <el-button slot="reference" type="text"><i class="el-icon-question text-muted"></i></el-button>
              </el-popover>
            </div>
            <!--            <el-tooltip class="item" :content="item.description" placement="top-start" effect="light">-->
            <div class="fontSizeB fontSize26 mb10">{{ item.value }}</div>
            <!--            </el-tooltip>-->
            <div>平 均：{{ item.average }}</div>
            <div>优 秀：{{ item.top }}</div>
            <div>零分线：{{ item.zeroLineDesc }}</div>
            <div class="mb20">清退线：{{ item.quitLineDesc }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getIndexView} from "@/api/autoOperation/python"

export default {
  props: {
    targetExpressionParams: {
      default: {},
      type: Object
    }
  },
  data() {
    return {
      loading: false,//确定提交表单按钮loading
      title: "店铺指标",
      open: true,
      formData: {},
    }
  },
  created() {
    this.getTargetExpressionInfo()
  },
  methods: {
    getTargetExpressionInfo() {
      this.loading = true
      getIndexView(this.targetExpressionParams).then(res => {
        this.formData = res.data.data.data
      }).finally((err) => {
        this.loading = false;
      })
    },
    // 取消
    cancel(e) {
      this.$emit('close', e)
    },
  }
}
</script>

<style scoped>

</style>
